<template>
  <div class="content-body" :style="borderStyle">
    <div class="query-header">查询项：
      <span v-if="isBack === true " @click="back">返回</span>
    </div>
    <div
      v-if="query !== undefined && query !== null &&query.length > 0"
      class="query-custom"
    >
      <el-form
        ref="form"
        :model="form"
        :inline="true"
        size="small"
        label-width="120px"
      >
        <el-form-item
          v-for="(item) in query"
          :key="'query-' + item.label"
          :prop="item.column"
          style="margin-top: 10px;margin-bottom: 10px;"
        >
          <el-input
            v-if="item.type === 1"
            v-model="form[item.column]"
            clearable
            :placeholder="item.label"
          />
          <el-date-picker
            v-if="item.type === 2"
            v-model="form[item.column]"
            format="yyyy/MM/dd"
            value-format="yyyy/MM/dd"
            type="date"
            :placeholder="item.label"
            clearable
          />
          <el-time-select
            v-if="item.type === 3"
            v-model="form[item.column]"
            :picker-options="{ start: '00:00', step: '00:15', end: '24:00' }"
            :placeholder="item.label"
            clearable
          />
          <el-date-picker
            v-if="item.type === 4"
            v-model="form[item.column]"
            format="yyyy/MM/dd"
            value-format="yyyyMMdd"
            type="daterange"
            clearable
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
          <el-date-picker
            v-if="item.type === 5"
            v-model="form[item.column]"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
            format="yyyy/MM/dd HH:mm:ss"
            value-format="yyyyMMddHHmmss"
            clearable
          />
        </el-form-item>
        <el-form-item style="margin-top: 10px;margin-bottom: 10px;">
          <el-button
            type="primary"
            size="small"
            class="custom-button"
            icon="el-icon-search"
            @click="queryEntity"
          >查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="article-body">
      <el-empty v-if="dataList === null || dataList.length === 0" class="article-content" :image-size="100" />
      <div v-else class="article-content">
        <div
          v-for="(obj,index) in dataList"
          :key="'obj-'+index"
          class="custom-ul-li"
          @click="openEntity(obj)"
        >
          <div class="custom-date">
            <div class="custom-date-body">
              <div class="custom-date-line top"><time-format :date="obj[column[0].time]" :type="'day'" /></div>
              <div class="custom-date-line"><time-format :date="obj[column[0].time]" :type="'year'" /></div>
            </div>
          </div>
          <div class="custom-line">
            {{ obj[column[0].title] }}
          </div>
        </div>
      </div>
      <div class="query-pager">
        <el-pagination
          :current-page="form.page"
          :page-size="form.size"
          :total="pagerSize"
          class="custom-pager"
          style="margin-top: 8px;"
          layout="total, prev, pager, next, sizes"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
    </div>
  </div>
</template>
<script>
import { more } from '@/mixins/template'
import { layout } from '@/mixins/layout'
import TimeFormat from '@/template/NewList/PcListTemplateFirst/solt/time.vue'
export default {
  name: 'PcMoreNewListTempV1',
  components: { TimeFormat },
  mixins: [more, layout]
}
</script>

<style scoped>
.content-body {
  width: 100%;
  height: 100%;
  padding: 0 15px;
  box-sizing: border-box;
  display: flex;
  flex-flow: column nowrap;
}
.query-header {
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: left;
  font-size: 1.4rem;
  font-weight: bold;
  text-indent: 15px;
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  span {
    text-align: center;
    font-size: 0.9rem;
    cursor: pointer;
    font-weight: 500;
    display: block;
    width: 60px;
    height: 30px;
    background-color: var(--edu-hover-bg-100);
    line-height: 30px;
    color: var(--edu-hover-color-200);
    text-indent: 0;
    border-radius: 4px;
  }
}
.query-header:before {
  content:'';
  position: absolute;
  width: 4px;
  top:12px;
  height: 27px;
  left: 0;
  background-color: var(--edu-hover-bg-100);
}
.query-custom{
  flex: 0 1 auto;
  min-height: 50px;
  border-bottom: 1px solid var(--edu-border-100);
}

.article-body {
  flex: 1 1 auto;
  overflow: hidden;
  height: inherit;
  display: flex;
  flex-flow: column nowrap;
  .article-content {
    flex: 1 1;
    width: 100%;
    overflow-y: auto;
  }
  .query-pager {
    width: 100%;
    height: 50px;
  }
}
.custom-ul-li {
  width: 100%;
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid var(--edu-border-100);
  cursor: pointer;
}
.custom-ul-li {
  width: 100%;
  height: 80px;
  cursor: pointer;
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  padding: 10px 0;
}
.custom-line:hover {
  color: var( --edu-hover-text-100);
  background-color: var(--edu-hover-bg-200);
}
.custom-date {
  width: 60px;
  height: 60px;
  box-sizing: border-box;
}
.custom-date-body {
  width: 100%;
  height: 100%;
  border: 1px solid var(--edu-hover-bg-100);
}
.custom-line {
  flex: 1 1;
  font-size: 0.9rem;
  line-height: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  box-sizing: border-box;
}
.custom-date-line {
  width: 100%;
  text-align: center;
  height: 30px;
  line-height: 30px;
  font-size: 0.8rem;
  color: var(--edu-hover-text-100);
}
.custom-date-line.top {
  background-color: var(--edu-hover-bg-100);
  color: var(--edu-hover-color-200);
  font-size: 1.3rem;
  font-weight: bold;
}
.custom-button {
  background-color: var(--edu-hover-bg-100) !important;
  border: 1px solid var(--edu-hover-bg-100) !important;
}
.custom-pager::v-deep {
  .el-pager  li.active {
    color: var(--edu-hover-bg-100) !important;
  }
  .el-pager  li:hover {
    color: var(--edu-hover-bg-100) !important;
  }
  button:hover {
    color: var(--edu-hover-bg-100) !important;
  }
}
</style>
